import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
import {UtilComponent} from '../../interface/util-component.interface';
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import {OverviewMap} from 'ol/control.js';
import {DragRotateAndZoom} from 'ol/interaction.js';
import TileLayer from 'ol/layer/Tile.js';
import OSM from 'ol/source/OSM.js';

@Component({
    selector: 'kylin-custom-overview',
    templateUrl: './custom-overview.component.html',
    styleUrls: ['./custom-overview.component.less'],
    encapsulation: ViewEncapsulation.None
})
export class CustomOverviewComponent implements OnInit, UtilComponent {

    hasContent = true;
    map: Map;
    dragInteraction: DragRotateAndZoom;

    @Input() set data(val) {
        Object.assign(this, val);
    }

    overviewMapControl: OverviewMap;

    constructor() {
    }

    ngOnInit() {
        this.turnOn();
    }

    turnOn() {
        if (this.map) {
            this.overviewMapControl = new OverviewMap({
                // see in overviewmap-custom.html to see the custom CSS used
                className: 'ol-overviewmap ol-custom-overviewmap',
                layers: [
                    new TileLayer({
                        source: new OSM()
                    })
                ],
                view: new View({
                    projection: 'EPSG:3857'
                }),
                collapseLabel: '\u00BB',
                label: '\u00AB',
                collapsed: false
            });

            this.dragInteraction = new DragRotateAndZoom();
            this.map.addControl(this.overviewMapControl);
            this.map.addInteraction(this.dragInteraction);
        }
    }

    turnOff() {
        if (this.map) {
            this.map.removeControl(this.overviewMapControl);
            this.map.removeInteraction(this.dragInteraction);
        }
    }

    cancel(options?: any): any {
        this.turnOff();
    }

}
